<template>
  <div class="details">
    <!-- 订单详情 -->
    <van-nav-bar title="订单详情" left-arrow fixed @click-left="onClickLeft">
    </van-nav-bar>

    <!-- 订单状态 -->
    <div
      class="details-states details-border"
      v-for="(item, i) of detailList"
      :key="i"
    >
      <h5 class="pt-3">
        订单{{
          item.orderStatus == 0
            ? "待支付"
            : item.orderStatus == 1
            ? "已支付"
            : item.orderStatus == 2
            ? "已完成"
            : "已取消"
        }}
      </h5>
      <p class="mt-2">感谢您对阿粥的支持，欢迎再次光临</p>
      <van-button round size="small" color="#000" class="mt-3 mb-3"
        >再来一单</van-button
      >
    </div>

    <!-- 详情卡片 -->
    <div
      class="details-content details-border row"
      v-for="(item, i) of detailList"
      :key="i"
    >
      <div class="col-8 pt-3">
        <h6>{{ item.storeName }}</h6>
        <p class="mt-2" v-show="false">武汉市武昌区东方宝泰B3层3046号铺</p>
      </div>
      <div class="col-4 pt-3">
        <button class="content-btn btn1"></button>
        <button class="content-btn btn2"></button>
      </div>
      <!-- 列表 -->
      <div class="col-12">
        <ul
          class="clearfix"    
        >
          <li class="store-info d-flex justify-content-between" v-for="(pros, j) of item.orderDetailsList"
          :key="j">
            <img :src="`${pros.cover_img}`" />
            <div class="detail-name">
              <h6>{{ pros.shop_name }}</h6>
            </div>
            <div class="">
              <h6>￥{{ pros.price.toFixed(2) }}</h6>
              <p style="font-size: 12px">x{{pros.shop_count}}</p>
            </div>
          </li>
          <!-- <li class="store-info d-flex justify-content-between">
            <img src="../assets/logo.png" alt="" />
            <div class="detail-name">
              <h6>浓爆柠</h6>
              <p style="">
                单孔细吸管，冰(推荐)，正常(推荐)，标准(含冰球)，不分装，标准甜(推荐)，标准(含柠檬)
              </p>
            </div>
            <div class="">
              <h6>￥21</h6>
              <p style="font-size: 12px">x1</p>
            </div>
          </li> -->
        </ul>
      </div>
      <!-- 总数量、总金额 -->
      <div class="col-12 d-flex justify-content-between">
        <h6>商品总价</h6>
        <h6>￥{{ item.totalPrice.toFixed(2) }}</h6>
      </div>
      <!-- 配送费 -->
      <!-- <div class="col-12 d-flex justify-content-between" v-show="false">
        <h6>配送费</h6>
        <h6>￥6.00</h6>
      </div> -->
      <!-- 合计 -->
      <div class="col-12 d-flex justify-content-end">
        <h6>
          共有{{ item.shopCount }}件商品，合计<span
            >￥{{ item.totalPrice.toFixed(2) }}</span
          >
        </h6>
      </div>
    </div>

    <!-- 订单信息 -->
    <div
      class="details-info details-border row mb-3"
      v-for="(item, i) of detailList"
      :key="i"
    >
      <div class="col-12">订单信息</div>
      <div class="col-12">
        下单时间：{{ item.createAt.slice(0, 19).replace("T", " ") }}
      </div>
      <div class="col-12 d-flex justify-content-between">
        订单编号：{{ item.orderCode }}
        <button>复制</button>
      </div>
      <div class="col-12" v-show="false">
        配送地址：<span>xxx市xxx区xxx街xxx号</span>
        <p>胡xx(先生) 13412345678</p>
      </div>
      <div class="col-12">备注信息：<span></span></div>
    </div>
  </div>
</template>

<script>
import Bus from "../assets/js/bus";
// 第二步引入vuex
import { mapMutations, mapState } from "vuex";

export default {
  data() {
    return {
      detailList: [], //v-for的订单内容
      // orderDetailId: null
    };
  },
  methods: {
    ...mapMutations(["setOrderId"]),
    // 返回上一级
    onClickLeft() {
      this.$router.back(-1);
    },
  },
  computed: {
    ...mapState(["orderDetailId"]),
  },
  // created(){

  //   console.log(this.orderDetailId);
  // },
  mounted() {
    

    // 获取当前用户id信息
    if (this.isLogin) {
      // 获得当前用户id
      this.axios
        .get(`/api/user/getUser?userId=${this.userId}`)
        .then((result) => {
          // console.log(result);
          // 用户信息
          this.userPhone = result.data.data.phone;
          // 测试当前用户信息
          // console.log(this.userPhone);
        });
    }

    //接收view/Order.vue"当前订单"传来的参数
    // arg就是接收的数据
    Bus.$on("sendToOneDetail", (arg) => {
      //console.log(arg);
      // 改变vuex的值
      this.setOrderId(arg);
      console.log(this.orderDetailId);
    });

    //接收view/Order.vue"历史订单"传来的参数
    // arg就是接收的数据
    Bus.$on("sendToTwoDetail", (arg) => {
      //console.log(arg);
      this.setOrderId(arg);
      console.log(this.orderDetailId);
    });

    //发送axios请求数据
    let details = []; //所有订单
    this.axios.get("/api/order/getAll").then((result) => {
      if (result.data.code == 200) {
        details = result.data.data;
        console.log(details);
      }
      var detailList = []; //保存符合orderId的订单
      for (let item of details) {
        if (item.orderId == this.orderDetailId) {
          detailList.push(item);
        }
      }
      console.log(detailList);
      this.detailList = detailList;
    });
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

body{
  background-color: #f8f9fa;
}

.details-border {
  width: 92%;
  background-color: white;
  // border-radius: 15px;
  margin: 0 auto;
  margin-top: 60px;
  h5 {
    font-weight: 700;
  }
  p {
    font-size: 12px;
  }
}

.details-states {
  border-bottom: 1px solid #ebebeb;
  text-align: center;
}

.details-content {
  margin-top: 30px;
  p {
    color: grey;
  }
  & > :nth-child(2) {
    padding: 0;
    .content-btn {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      margin-left: 3px;
      border: 1px solid black;
    }
    .btn1,
    .btn2 {
      background-image: url("../assets/home/iphone.png");
      background-repeat: no-repeat;
      background-size: 35px 35px;
      background-position: 4px 3px;
    }
    .btn2 {
      background-image: url("../assets/home/navigation.png");
    }
  }

  & > :nth-child(3) {
    ul {
      // padding: 0;
      .store-info {
        margin: 0 15px;
        padding: 15px 0;
        border-bottom: 1px solid #ccc;
        img {
          width: 20%;
          height: 20%;
        }
        .detail-name {
          width: 200px;
          p {
            font-size: 12px;
            margin: 0;
          }
        }
      }
    }
  }

  & > :nth-child(4),
  & > :nth-child(5),
  & > :nth-child(6) {
    min-height: 45px;
    h6 {
      line-height: 45px;
      span {
        font-weight: 700;
      }
    }
  }
}

.details-info {
  margin-top: 30px;
  div {
    min-height: 30px;
    font-size: 14px;
    color: gray;
    margin-top: 10px;
    p {
      text-indent: 6em;
    }
  }
  & > :nth-child(1) {
    color: #000;
    font-size: 16px;
    font-weight: 700;
  }
  & > :nth-child(3) {
    button {
      width: 40px;
      height: 25px;
      border-radius: 10px;
      border: 0;
    }
  }
}
</style>